<template>
    <el-drawer :before-close="beforeClose" :visible.sync="drawer" direction="rtl" size="45%" :with-header="false" :width="700">
        <div class="drawer_box">
            <div class="drawer_t">
                <div class="drawer_t_l">
                    <img class="drawer_t_l_img"
                        src="../../../../../static/skin/herodoo/main/platform/home/img/piliangoumai.png" alt="">
                    订单支付
                </div>
                <img class="drawer_t_r" src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png"
                    alt="" @click="beforeClose">
            </div>
            <div class="drawer_c">
                <div class="drawer_c_title">订单确认</div>
                <div class="message_box">
                    <div class="left_box">
                        <div>订单编号:</div>
                        <div>下单时间:</div>
                        <div>权益名称:</div>
                        <div>权益标签:</div>
                        <div>单价:</div>
                        <div>数量:</div>
                        <div>应付金额:</div>
                    </div>
                    <div class="right_box" v-if="goodsList.ID">
                        <img v-if="goodsList.MainPicturePath" :src="JSON.parse(goodsList.MainPicturePath)[0].url"
                            alt="">
                        <div class="list">
                            <div>{{"AIGC" + new Date().getTime()+goodsList.ID}}</div>
                        </div>
                        <div class="list">
                            <div>{{ new Date().toJSON().substring(0, 10) + ' ' + new Date().toTimeString().substring(0,
        8) }}</div>
                        </div>
                        <div class="list">
                            <div>{{ goodsList.Name }}</div>
                        </div>
                        <div class="list">
                            <div class="lable">
                                <span v-for="(item, ind) in goodsList.FlagListName.split(',')" :key="ind">{{ item
                                    }}</span>
                            </div>
                        </div>
                        <div class="list">
                            <div>￥{{ goodsList.CostPrice }}</div>
                        </div>
                        <div class="list">
                            <div>{{ num }}件</div>
                        </div>
                        <div class="list price">
                            <div>￥<span style="font-size: 2.6rem;">{{ goodsList.CostPrice * num }}</span><span
                                    style="color: black;font-weight: 400;"> 元</span></div>
                        </div>
                    </div>
                </div>
                <div class="drawer_c_title">支付方式</div>
                <div class="pay_type_box">
                    <div class="left_box">
                        <div class="check_box" :class="rideo == 1 ? 'check_box_boder' : ''" @click="rideo = 1">
                            <div class="text">
                                <span class="redio">
                                    <span class="dio" v-if="rideo == 1"></span>
                                </span>
                                <img src="/static/skin/default/MMS/AIGC/EquityRepositories/BenefitsDetails/img/wx.png"
                                    alt="">
                                <span style="padding-top: .5rem;">微信支付</span>
                            </div>
                        </div>
                        <div class="check_box" :class="rideo == 2 ? 'check_box_boder' : ''" @click="rideo = 2">
                            <div class="text">
                                <span class="redio">
                                    <span class="dio" v-if="rideo == 2"></span>
                                </span>
                                <img src="/static/skin/default/MMS/AIGC/EquityRepositories/BenefitsDetails/img/zfb.png"
                                    alt="">
                                <span style="padding-top: .5rem;">支付宝支付</span>
                            </div>
                        </div>
                    </div>
                    <div class="right_box">
                        <div class="item-pic" id="qrinvitecode"></div>
                        <div style="font-size: 1.2rem;color: #A3A3A3;">扫一扫快速支付</div>
                        <div>请您在<van-count-down millisecond :time="time" format="HH:mm:ss" />内完成支付</div>
                        <div>否则订单将自动取消</div>
                    </div>
                </div>
                <!-- <van-count-down millisecond :time="time" format="HH:mm:ss" /> -->

            </div>
            <div class="cancel_box" @click="drawer = false">
                取消
            </div>
        </div>
    </el-drawer>
</template>

<script>
import QRCode from 'qrcodejs2'
import axios from 'axios'
export default {
    name: 'bulkBuying',
    props: {
        DialogTitle: {
            type: String,
            default: '批量收藏',
        },
        goodsList: {
            type: Object,
            default: {},
        },
        num: {
            type: Number,
            default: 1,
        }
    },
    data() {
        return {
            octopus: this.$parent.octopus,
            drawer: false,
            tabId: 1,
            time: 24 * 60 * 60 * 1000,
            rideo: 1,
            url: {},
            timer: null
        };
    },
    watch: {
        rideo: {
            handler(e, a) {
                // console.log(1234);
                // this.drawerOp()
                document.querySelector('#qrinvitecode').innerHTML = ''
                if (this.rideo == 1) {
                    new QRCode('qrinvitecode', {
                        width: 150,  //宽度
                        height: 150, // 高度  
                        text: this.url.wx,
                        render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
                    })
                } else {
                    new QRCode('qrinvitecode', {
                        width: 150,  //宽度
                        height: 150, // 高度  
                        text: this.url.ali,
                        render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
                    })
                }
            }
        },
    },
    computed: {
    },
    beforeDestroy() {
        clearInterval(this.timer)
        this.timer = null
    },
    mounted() {
        this.octopus.request.api.post("/ESB/Services/Tools/Data/Get", {
                requestType: "POST_JSON", // POST_JSON
                url: "https://api.mch.weixin.qq.com/v3/pay/transactions/out-trade-no/PT202405210111200031?mchid=1650102004",
                params: {
                },
            }, function (apiData) {
                console.log(apiData);
            });
    },
    methods: {
        drawerOp() {
            let o = this
            const data = {
                "code": "AIGC" + new Date().getTime()+this.goodsList.ID + this.randomString(4),
                "createTime": new Date().toJSON().substring(0, 10) + ' ' + new Date().toTimeString().substring(0, 8),
                "tradeTypeID": o.octopus.passport.typeID,
                "TypeID": o.goodsList.TypeID,
                "TotalPrice": o.goodsList.CostPrice * this.num
            }
            this.createOrderESB(data)
        },
        // 拉起后端支付
        createOrderESB(formData){
            let o = this
            this.octopus.tools.openAPI("/ESB/AIGC/Purchase/PC/SingleCreate", {
                "Quantity": o.num,
                "EquityID": this.goodsList.ID,
                "CompanyID": this.goodsList.CompanyID,
                "TypeID": this.goodsList.TypeID,
                "TradeTypeID": formData.tradeTypeID,
                "MerchantID": this.octopus.passport.authorization.company,
                "PlatformID": "1",
                "ChannelID": "1",
                "PayCode": formData.code,
                "UserID": this.octopus.passport.id,
            }, function(data){
                if (data.status.code == 200) {
                    o.createTradeQR(formData)
                } else {
                    o.octopus.tips.error(data.status.message);
                }
            })

            // this.octopus.request.api.post("/ESB/Services/Tools/Data/Get", {
            //     requestType: "POST_JSON", // POST_JSON
            //     url: "http://wxzf001.natapp1.cc/ESB/AIGC/Purchase/Create",
            //     params: {
            //         "List": [
            //             {
            //                 "CompanyID": this.goodsList.CompanyID,
            //                 "EquityID": this.goodsList.ID,
            //                 "TypeID": this.goodsList.TypeID,
            //                 "Quantity": o.num
            //             },
            //         ],
            //         "TradeTypeID": formData.tradeTypeID,
            //         "MerchantID": this.octopus.passport.authorization.company,
            //         "PlatformID": "1",
            //         "ChannelID": "1",
            //         "PayCode": formData.code,
            //         "UserID": this.octopus.passport.id,
            //     },
            // }, function (apiData) {
            //     if (apiData.content.response.status.code == 200) {
            //         o.createTradeQR(formData.code)
            //     } else {
            //         o.octopus.tips.error(apiData.content.response.content);
            //         o.drawer = false
            //     }
            // });
        },

        // 根据Code生成
        createTradeQR(formData) {
            let o = this
            this.octopus.tools.openAPI("/ESB/AIGC/Trade/QR", {
                code:formData.code
            }, function (apiData) {
                if (apiData.content.status.code == 200) {
                    let url = JSON.parse(apiData.content.content)
                    o.url = url
                    o.drawer = true
                    o.$nextTick(() => {
                        document.querySelector('#qrinvitecode').innerHTML = ''
                        if (o.rideo == 1) {
                            new QRCode('qrinvitecode', {
                                width: 150,  //宽度
                                height: 150, // 高度  
                                text: url.wx,
                                render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
                            })
                        } else {
                            new QRCode('qrinvitecode', {
                                width: 150,  //宽度
                                height: 150, // 高度  
                                text: url.ali,
                                render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
                            })
                        }
                    })
                    // 查询订单支付状态回调
                    o.queryOrderStatus(formData)
                } else {
                    o.octopus.tips.error(data.status.message);
                    o.drawer = false
                }
            });
            // this.octopus.request.api.post("/ESB/Services/Tools/Data/Get", {
            //     requestType: "POST_JSON", // POST_JSON
            //     url: "http://wxzf001.natapp1.cc/ESB/AIGC/Trade/QR",
            //     params: {
            //         code,
            //     },
            // }, function (apiData) {
            //     if (apiData.content.response.status.code == 200) {
            //         let url = JSON.parse(apiData.content.response.content)
            //         o.url = url
            //         console.log();
            //         o.drawer = true
            //         o.$nextTick(() => {
            //             document.querySelector('#qrinvitecode').innerHTML = ''
            //             if (o.rideo == 1) {
            //                 new QRCode('qrinvitecode', {
            //                     width: 150,  //宽度
            //                     height: 150, // 高度  
            //                     text: url.wx,
            //                     render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
            //                 })
            //             } else {
            //                 new QRCode('qrinvitecode', {
            //                     width: 150,  //宽度
            //                     height: 150, // 高度  
            //                     text: url.ali,
            //                     render: 'canvas',// 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
            //                 })
            //             }
            //         })
            //         // 查询订单支付状态回调
            //         o.queryOrderStatus(formData)
            //     } else {
            //         o.octopus.tips.error(apiData.content.response.content);
            //         o.drawer = false
            //     }
            // });
        },
        // 查询订单回调
        queryOrderStatus(formData) {
            let o = this
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
            this.timer = setInterval(()=> {
                const data = {
                    requestType: "POST_JSON", // POST_JSON
                    // url: "http://wxzf001.natapp1.cc/ESB/AIGC/Trade/QueryOrder",
                    url: "/ESB/AIGC/Trade/QueryOrder",
                    params: {
                        code: formData.code,
                    },
                }
                // $.ajax({
                //     url: this.octopus.config.url + '/ESB/Services/Tools/Data/Get?access_token=' + this.octopus.passport.token, /*接口域名地址*/
                //     type: 'POST',
                //     data: JSON.stringify(data),
                //     contentType: 'application/json',//charset=utf-8
                //     processData: false,// 告诉jQuery不要去处理发送的数据
                //     success: function (res) {
                //         if(res.content.response.status.code == 200) {
                //             clearInterval(o.timer)
                //             o.timer = null
                //             o.$confirm('恭喜您成功购买此权益', '支付成功', {
                //                 confirmButtonText: '确定',
                //                 confirmButtonClass: 'confirm-success-btn',
                //                 showCancelButton: true,
                //                 center: true
                //             }).then(() => {
                //                 o.drawer = false
                //                 o.$emit('close')
                //                 o.octopus.router.jump("/MMS/AIGC/ShoppingCentre/List");
                //             })
                //         }
                //     },
                //     error: (xhr, status, err)=> {
                //         o.octopus.tips.error(err)
                //     }
                // })
                $.ajax({
                    url: this.octopus.config.url + '/ESB/Services/Tools/OpenAPI?access_token=' + this.octopus.passport.token, /*接口域名地址*/
                    type: 'POST',
                    data: JSON.stringify({open_api_url: data.url, code: formData.code}),
                    contentType: 'application/json',//charset=utf-8
                    processData: false,// 告诉jQuery不要去处理发送的数据
                    success: function (res) {
                        if(res.content.status.code == 200) {
                            clearInterval(o.timer)
                            o.timer = null
                            o.$confirm('恭喜您成功购买此权益', '支付成功', {
                                confirmButtonText: '确定',
                                confirmButtonClass: 'confirm-success-btn',
                                showCancelButton: true,
                                center: true
                            }).then(() => {
                                o.drawer = false
                                o.$emit('close')
                                o.octopus.router.jump("/MMS/AIGC/ShoppingCentre/List");
                            })
                        }
                    },
                    error: (xhr, status, err)=> {
                        o.octopus.tips.error(err)
                    }
                })
            }, 3000)
        },
        beforeClose() {
            clearInterval(this.timer)
            this.timer = null
            this.drawer = false
        },
        randomString(length) {
            let result = "";
            const characters =
                "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (let i = 0; i < length; i++) {
                result += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return result;
            }
        },
};
</script>
<style scoped>
.table_img {
    width: 7rem;
    height: 7rem;
    border-radius: 1rem;
    margin-right: 1rem;
}

.drawer_box {
    padding: 3rem .8rem 3rem 0;
    height: calc(100% - 5rem);
    display: flex;
    flex-direction: column;
}

.drawer_t {
    padding: 0 2.8rem;
    display: flex;
    justify-content: space-between;
}

.drawer_t_l {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
}

.drawer_t_l_img {
    width: 2.8rem;
    margin-right: 1rem;
}

.drawer_t_r {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}



.cancel_box {
    line-height: 4rem;
    background-color: #F0F0F0;
    color: #A3A3A3;
    position: absolute;
    box-shadow: inset 0px 0px 4px 0px #FFFFFF;
    padding: .2rem 5rem;
    border-radius: .5rem;
    bottom: 2rem;
    right: 3rem;
    cursor: pointer;
}

.drawer_c {
    padding: 0 3.2rem;
    height: 82vh;
    overflow: auto;
    padding-bottom: 1rem;
}

.drawer_c_title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 3rem 0;
}

.van-count-down {
    color: #F78C51;
    line-height: 2.8rem;
    font-size: 1.4rem;
    margin: 0 .5rem;
    display: inline-block;
}

.message_box {
    color: #4d4d4d;
    width: 100%;
    box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4), inset 0px 0px 4px 0px #F7F4FE;
    background-color: #FAFAFA;
    display: flex;
    border-radius: 1.5rem;
    overflow: hidden;
}

.message_box .left_box {
    padding: 1rem 0;
    width: 18%;
    padding-left: 1.5rem;
    border-left: 1.5rem solid #F78C51;
}

.message_box .left_box>div {
    height: 5rem;
    line-height: 5rem;
    font-size: 1.6rem;

}

.message_box .right_box {
    position: relative;
    padding: 1rem 3rem;
    width: 82%;
    background-color: #FFFFFF;
    border-radius: 1.5rem;
    box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4), inset 0px 0px 4px 0px #F7F4FE;
}

.message_box .right_box img {
    width: 20rem;
    height: 20rem;
    position: absolute;
    border-radius: 1rem;
    top: 3rem;
    right: 3rem;
}

.message_box .right_box .list {
    height: 5rem;
    display: flex;
    justify-content: center;
    flex-flow: column;
}

.message_box .right_box .list>div {
    width: 60%;
}

.message_box .right_box .list .lable>span {
    color: #426CE9;
    border: 1px solid #426CE9;
    font-size: 1.4rem;
    padding: .2rem .5rem;
    border-radius: .3rem;
    margin-right: .3rem;
}

.price {
    font-weight: 700;
    color: #F78C51;
    font-size: 1.8rem;
}

.pay_type_box {
    color: #4d4d4d;
    width: 100%;
    height: 21rem;
    box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4), inset 0px 0px 4px 0px #F7F4FE;
    background-color: #FAFAFA;
    display: flex;
    border-radius: 1.5rem;
    overflow: hidden;
}

.pay_type_box .left_box {
    background-color: #FFFFFF;
    width: 65%;
    box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4), inset 0px 0px 4px 0px #F7F4FE;
    border-radius: 1.5rem;
    display: flex;
    justify-content: space-between;
    flex-flow: column;
    padding: 3rem;
    box-sizing: border-box;
}



.pay_type_box .left_box .check_box {
    cursor: pointer;
    display: flex;
    justify-content: center;
    flex-flow: column;
    border: 1px solid #E2E2E2;
    height: 6rem;
    border-radius: 1rem;
    padding-left: 4rem;
    box-sizing: border-box;
}

.pay_type_box .left_box .check_box_boder {
    border: 1px solid #F78C51;
}

.pay_type_box .left_box .check_box .text {
    display: flex;
    font-weight: 700;
}

.pay_type_box .left_box .check_box .text img {
    width: 3rem;
    margin: 0 1rem;
}

.pay_type_box .left_box .check_box .text .redio {
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1px solid #F78C51;
    margin-top: .3rem;
    position: relative;
}

.pay_type_box .left_box .check_box .text .redio .dio {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background-color: #F78C51;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.pay_type_box .right_box {
    width: 35%;
    display: flex;
    justify-content: center;
    flex-flow: column;
    height: 100%;
    text-align: center;
    font-size: 1.4rem;
}

.pay_type_box .right_box .item-pic {
    width: 10rem;
    height: 10rem;
    margin: 0 auto;
}

>>>.pay_type_box .right_box .item-pic img {
    width: 10rem;
}
</style>
